import React, { use, useEffect, useState } from 'react'
import {
  Form,
  Input,
  Button,
  Checkbox,
  Card,
  Typography,
  Divider,
  Space,
  message,
  ConfigProvider
} from 'antd'
import {
  UserOutlined,
  LockOutlined,
  GoogleOutlined,
  GithubOutlined,
  TwitterOutlined
} from '@ant-design/icons'
import { useNavigate } from 'react-router'
import './index.scss'
import type { AxiosResponse } from 'axios'
const { Title, Text } = Typography
import { login } from '@/api/login'
import type { LoginFormValues } from '@/api/login'

const Index: React.FC = () => {
  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)
  const navigate = useNavigate()

  const onFinish = async (values: LoginFormValues) => {
    console.log('Received values of form: ', values)
    setLoading(true)
    // 模拟API调用
    await login(values).then(res => {
      localStorage.setItem('token', res.token)
      console.log('登录成功', res)
    })
    navigate('/home')
  }

  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#1890ff',
          borderRadius: 4
        }
      }}
    >
      <div className='login-container'>
        <Card className='login-card' hoverable>
          <div className='login-header'>
            <Title level={3} className='login-title'>
              欢迎登录
            </Title>
            <Text type='secondary'>请输入您的凭证继续</Text>
          </div>

          <Form
            form={form}
            name='login'
            initialValues={{ remember: true }}
            onFinish={onFinish}
            layout='vertical'
            size='large'
          >
            <Form.Item
              name='username'
              rules={[
                { required: true, message: '请输入用户名!' },
                { min: 4, message: '用户名至少4个字符' }
              ]}
            >
              <Input
                prefix={<UserOutlined className='input-prefix-icon' />}
                placeholder='用户名/邮箱'
              />
            </Form.Item>

            <Form.Item
              name='password'
              rules={[
                { required: true, message: '请输入密码!' },
                { min: 6, message: '密码至少6个字符' }
              ]}
            >
              <Input.Password
                prefix={<LockOutlined className='input-prefix-icon' />}
                placeholder='密码'
              />
            </Form.Item>

            <Form.Item>
              <div className='login-remember-forgot'>
                <Form.Item name='remember' valuePropName='checked' noStyle>
                  <Checkbox>记住我</Checkbox>
                </Form.Item>

                <a className='login-forgot' href='/forgot-password'>
                  忘记密码?
                </a>
              </div>
            </Form.Item>

            <Form.Item>
              <Button
                type='primary'
                htmlType='submit'
                block
                loading={loading}
                className='login-button'
              >
                登录
              </Button>
            </Form.Item>
          </Form>

          <Divider plain>或通过以下方式登录</Divider>

          <Space direction='horizontal' size='middle' className='social-login'>
            <Button icon={<GoogleOutlined />} shape='circle' />
            <Button icon={<GithubOutlined />} shape='circle' />
            <Button icon={<TwitterOutlined />} shape='circle' />
          </Space>

          <div className='login-footer'>
            还没有账号? <a href='/register'>立即注册</a>
          </div>
        </Card>
      </div>
    </ConfigProvider>
  )
}

export default Index
